import PropTypes from 'prop-types';
import classnames from 'classnames';
import React from 'react';
import css from './index.less';
import Ajax from 'utils/ajax';
import Swiper3d from './swiper3d';
import Shader from './swiper3d/shader';
import Details from './detail';
import Packet from '../pocket';
import {FEED} from 'utils/feedFunc';
import SwiperScroll from './swiperScroll';


import bg from 'assert/img/otherImgs/bg.jpg';
import logo from 'assert/img/otherImgs/logo.png';
import bottom1 from 'assert/img/otherImgs/bottom1.png';
import bottomWord from 'assert/img/otherImgs/bottomWord.png';


export default class RenderClass extends React.Component {

  static propTypes = {
    itemDetail: PropTypes.array.isRequired,
    switchRoute: PropTypes.func,
    selectedInd: PropTypes.number,
  };

  static defaultProps = {
    itemDetail: [
      {
        goodsTaobaoId: '38824121898',
        picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
        title: '撒地方撒水电费范围为房屋是否发顺丰威风威风',
        price: '198.00',
        soldQuantity: '123465',
      },
      {
        goodsTaobaoId: '38824121898',
        picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
        title: '撒地方撒水电费范围为房屋是否发顺丰威风威风',
        price: '198.00',
        soldQuantity: '123465',
      },
      {
        goodsTaobaoId: '38824121898',
        picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
        title: '撒地方撒水电费范围为房屋是否发顺丰威风威风',
        price: '198.00',
        soldQuantity: '123465',
      },
    ],
    selectedInd: 0,
    slideData: [
      {
        id: '550115461867',
      },
      {
        id: '550177067299',
      },
      {
        id: '550117381806',
      },
      {
        id: '551204288736',
      },
      {
        id: '550113341486',
      },
      {
        id: '565315404571',
      },
      {
        id: '550137718457',
      },
      {
        id: '550177575853',
      }
    ],

  };


  constructor(props) {
    super(props);
    this.state = {
      detailsId: -1,
      showDetails: false,
      showSlider: true,
      showPacket: false,
      // boxArr: [0, 1, 2, 3, 4, 5, 6, 7, 8], // 首先加载的商品id的索引值
      scrollY: 0,
      startScroll: true,
    };

    this.itemDetail = props.itemDetail.slice(0);
    if (this.itemDetail.length % 3 === 2) this.itemDetail.splice(11, 0, this.itemDetail[0]); // 补足3的倍数的商品
    if (this.itemDetail.length % 3 === 1) {
      this.itemDetail.splice(11, 0, this.itemDetail[0]); // 补足3的倍数的商品
      this.itemDetail.splice(18, 0, this.itemDetail[8]); // 补足3的倍数的商品
    }
    this.swiperRef = React.createRef();

    // console.log('this.itemDetail==222', this.itemDetail);
  }

  componentDidMount() {

    // this.boxRef.current.addEventListener('touchmove', this.scrollTo, false);
    // const { autoScroll } = this.props;
    // if (autoScroll > 0) {
    //   this.autoScroll();
    // }

  }

  componentWillUnmount() {
    // this.boxRef.current.removeEventListener('touchmove', this.scrollTo, false);

  }

  // 点击下方红包雨就开始获得数据：
  async getJiangData() {
    const {result: imgUrl} = await Ajax.req({url: 'xuanshi.getJiang'});
    // console.log(' imgUrl', imgUrl);

    let couponImg = 'https://img.alicdn.com/imgextra/i2/3355153118/TB23WhHpviSBuNkSnhJXXbDcpXa-3355153118.png';
    this.setState({
      jiangUrl: imgUrl,
    }, () => {
      if (imgUrl === couponImg) FEED('', 'd8ce5bb651ff463f96dc279617d9b570');
    });
  }


  getId = (ind) => {
    this.setState({
      detailsId: this.props.slideData[ind - 1].id,
      showDetails: true,
    });
    FEED(this.props.slideData[ind - 1].id);
  };
  toPage() {
    this.setState({
      showPacket: false,
      showSlider: true,
    });
    FEED('');
  }

  showSliderFunc(swiper) {
    // console.log('swiper===', swiper);
    swiper.autoplay.stop(); // 在卸载swiper的时候把自动播放停掉，因为这个计时器没有清掉
    this.setState({
      showSlider: false,
    });
    FEED('');
  }


  render() {

    const {detailsId, showDetails, showSlider, showPacket, jiangUrl} = this.state;

    const detailsProps = {
      detailsId,
      itemDetail: this.itemDetail,
      hidden: () => {
        this.setState({
          showDetails: false,
        });
        FEED('');
      },
    };

    const bottomProps = {
      className: css.bottom,
      src: bottom1,
      onClick: () => {
        this.getJiangData();
        this.setState({
          showPacket: true,

        });
        FEED('');
      },
    };

    const contentProps = {
      className: css.boxWrapper,
    };


    const swProps = {
      itemDetail: this.itemDetail,
      getId: (id) => {
        this.setState({
          detailsId: id,
          showDetails: true,
        });
        FEED(id);
      },


    };


    return (
      <div className = {css.wrapper}>
        <img src={bg} className = {css.bg}/>
        {/*<img src={head} className = {css.head}/>*/}
        <img src={logo} className = {css.logo}/>

        <div {...contentProps}>
          <SwiperScroll {...swProps}/>
        </div>

        <div {...bottomProps}>
          <img className={css.img1} src={bottom1}/>
          <img className={css.img2} src={bottomWord}/>
        </div>

        {
          showSlider && <Shader onClick={ this.showSliderFunc.bind(this)}>
            <Swiper3d getId={this.getId.bind(this)} ref={this.swiperRef}/>
          </Shader>
        }
        {
          showDetails && <Details {...detailsProps}/>
        }
        {
          showPacket && <Packet toPage={this.toPage.bind(this)} url={jiangUrl}/>
        }
      </div>

    );
  }
}
